Frontend Sunucusuz Fonksiyonlar: Vercel ve Netlify ile Pratik Bir Kılavuz

Günümüzün dinamik web geliştirme ortamında, JAMstack mimarisi muazzam bir popülerlik kazandı ve geliştiricilere daha hızlı, daha güvenli ve ölçeklenebilir web uygulamaları oluşturma gücü verdi. JAMstack'in temel bir bileşeni, sunucu yönetimi olmadan doğrudan frontend'inizden arka uç kodu yürütmenize olanak tanıyan sunucusuz fonksiyonların kullanılmasıdır. Bu yaklaşım geliştirmeyi basitleştirir, operasyonel yükü azaltır ve uygulama performansını artırır.

Bu kılavuz, frontend sunucusuz fonksiyonlarına kapsamlı bir genel bakış sunar ve iki önde gelen platforma odaklanır: Vercel ve Netlify. Sunucusuz fonksiyonları kullanmanın faydalarını keşfedecek, Vercel ve Netlify ile bunları nasıl uygulayacağınızla ilgili pratik örneklere dalacak ve sağlam ve ölçeklenebilir uygulamalar oluşturmak için en iyi uygulamaları tartışacağız.

Frontend Sunucusuz Fonksiyonlar Nelerdir?

Frontend sunucusuz fonksiyonlar (sunucusuz API fonksiyonları veya bulut fonksiyonları olarak da bilinir), sunucusuz bir ortamda çalışan bağımsız, tek amaçlı fonksiyonlardır. Genellikle JavaScript veya platform tarafından desteklenen diğer dillerde (örneğin, Python, Go) yazılırlar ve HTTP istekleri veya diğer olaylar tarafından tetiklenirler. Geleneksel arka uç uygulamalarından farklı olarak, sunucusuz fonksiyonlar, talep üzerine sağlayıcı tarafından otomatik olarak ölçeklendirilir ve optimum performans ve maliyet verimliliği sağlar.

Bunları doğrudan edge'e dağıtabileceğiniz küçük, bağımsız arka uç mantığı birimleri olarak düşünün. Şunlar gibi görevleri yerine getirmenize olanak tanırlar:

• Form Gönderimleri: Özel bir arka uç sunucusuna ihtiyaç duymadan iletişim formlarını veya kayıt formlarını işleme.
• Veri Getirme: Harici API'lerden veri getirme ve frontend'inize sunma.
• Kimlik Doğrulama: Kullanıcı kimlik doğrulama ve yetkilendirmeyi işleme.
• Görüntü İşleme: Görüntüleri anında yeniden boyutlandırma veya optimize etme.
• Sunucu Tarafı Renderlama (SSR): Gelişmiş SEO ve performans için içeriği dinamik olarak renderlama.
• A/B Testi: A/B testi deneyleri uygulama.
• Kişiselleştirme: Bireysel tercihlere göre kullanıcı deneyimlerini özelleştirme.

Sunucusuz Fonksiyonları Kullanmanın Faydaları

Frontend geliştirme iş akışınızda sunucusuz fonksiyonları benimsemek çeşitli avantajlar sunar:

• Basitleştirilmiş Geliştirme: Sunucu yönetimi, altyapı sağlama veya ölçeklendirme konusunda endişelenmeden kod yazmaya odaklanın.
• Azaltılmış Operasyonel Yük: Sunucusuz platform tüm operasyonel yönleri ele alır ve özellikler oluşturmaya konsantre olmanızı sağlar.
• Gelişmiş Ölçeklenebilirlik: Sunucusuz fonksiyonlar, talep üzerine otomatik olarak ölçeklenerek yoğun trafik sırasında bile optimum performans sağlar.
• Maliyet Verimliliği: Yalnızca fonksiyon yürütme sırasında tüketilen kaynaklar için ödeme yaparsınız, bu da onu birçok uygulama için uygun maliyetli bir çözüm haline getirir.
• Gelişmiş Güvenlik: Sunucusuz platformlar yerleşik güvenlik özellikleri sağlar ve güvenlik açıklarını azaltarak güvenlik yamalarını otomatik olarak uygular.
• Daha Hızlı Dağıtım: Sunucusuz fonksiyonlar hızlı ve kolay bir şekilde dağıtılabilir, bu da daha hızlı yineleme döngüleri sağlar.

Vercel ve Netlify: Önde Gelen Sunucusuz Platformlar

Vercel ve Netlify, sunucusuz fonksiyonları kullananlar da dahil olmak üzere modern web uygulamalarını dağıtmak ve barındırmak için en popüler platformlardan ikisidir. Her iki platform da kusursuz bir geliştirici deneyimi, otomatik dağıtımlar ve yerleşik CDN özellikleri sunar.

Vercel

Vercel (eski adıyla Zeit), özellikle frontend geliştiricileri için tasarlanmış bir bulut platformudur. Hıza, basitliğe ve işbirliğine önem verir. Vercel, React, Vue.js ve Angular gibi popüler frontend çerçeveleriyle sorunsuz bir şekilde entegre olur ve içeriği düşük gecikmeyle sunmak için küresel bir edge ağı sağlar.

Netlify

Netlify, web uygulamaları oluşturmak ve dağıtmak için bir başka önde gelen platformdur. Sürekli dağıtım, sunucusuz fonksiyonlar ve edge compute dahil olmak üzere kapsamlı bir özellik paketi sunar. Netlify'ın kullanıcı dostu arayüzü ve sağlam özellik seti, onu her beceri düzeyinden geliştirici için popüler bir seçim haline getiriyor.

Vercel ile Sunucusuz Fonksiyonları Uygulama

Vercel ile sunucusuz bir fonksiyon oluşturmak için genellikle projenizin `api` dizininde bir dosya oluşturursunuz. Vercel, bu dosyaları otomatik olarak sunucusuz fonksiyonlar olarak tanır ve buna göre dağıtır. Dosya, iki argüman alan bir fonksiyonu dışa aktarmalıdır: `req` (istek nesnesi) ve `res` (yanıt nesnesi).

Örnek: Basit Bir "Merhaba Dünya" Fonksiyonu

`api/hello.js` adında bir dosya oluşturun ve aşağıdaki içeriğe sahip olsun:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

Projenizi Vercel'e dağıtın. Dağıtıldıktan sonra, bu fonksiyona `/api/hello` uç noktasında erişebilirsiniz (örneğin, `https://your-project-name.vercel.app/api/hello`).

Örnek: Form Gönderimlerini İşleme

Form gönderimlerini işleyen bir fonksiyon oluşturalım. Web sitenizde bu fonksiyona veri gönderen bir iletişim formunuz olduğunu varsayın.

`api/contact.js` adında bir dosya oluşturun ve aşağıdaki içeriğe sahip olsun:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    // TODO: E-postayı göndermek veya verileri depolamak için buraya mantığınızı uygulayın.
    // Bu, SendGrid gibi bir e-posta hizmeti kullanmayı veya
    // verileri bir veritabanında depolamayı içerebilir.

    // Gösteri amaçlı olarak, yalnızca verileri konsola kaydedeceğiz.
    console.log('Ad:', name);
    console.log('E-posta:', email);
    console.log('Mesaj:', message);

    res.status(200).json({ message: 'Form başarıyla gönderildi!' });
  } else {
    res.status(405).json({ message: 'İzin Verilmeyen Yöntem' });
  }
}

Bu örnekte:

• İstek yönteminin `POST` olup olmadığını kontrol ediyoruz.
• Verileri istek gövdesinden (`req.body`) çıkarıyoruz.
• Harici bir hizmet veya veritabanı ile entegre olacağınız yerin burası olduğunu hatırlatmak için `// TODO: Buraya mantığınızı uygulayın...` yer tutucu yorumunu ekliyoruz.
• 200 durum koduyla başarılı bir yanıt gönderiyoruz.
• İstek yöntemi `POST` değilse, 405 durum koduyla (İzin Verilmeyen Yöntem) bir hata yanıtı gönderiyoruz.

Fonksiyonlarınızda hataları uygun şekilde ele almayı unutmayın. Herhangi bir istisnayı yakalamak ve istemciye bilgilendirici hata mesajları döndürmek için `try...catch` bloklarını kullanın.

Netlify ile Sunucusuz Fonksiyonları Uygulama

Netlify, sunucusuz fonksiyonlar oluşturmak için Vercel'e benzer bir yaklaşım kullanır. Projenizde bir dizin (genellikle `netlify/functions` olarak adlandırılır) oluşturursunuz ve fonksiyon dosyalarınızı içine yerleştirirsiniz. Netlify, bu dosyaları otomatik olarak algılar ve sunucusuz fonksiyonlar olarak dağıtır.

Örnek: Basit Bir "Merhaba Dünya" Fonksiyonu

`netlify/functions` adında bir dizin ve `netlify/functions/hello.js` adında bir dosya oluşturun ve aşağıdaki içeriğe sahip olsun:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello, world!' }),
  };
};

Projenizi Netlify'a dağıtın. Dağıtıldıktan sonra, bu fonksiyona `/.netlify/functions/hello` uç noktasında erişebilirsiniz (örneğin, `https://your-project-name.netlify.app/.netlify/functions/hello`).

Örnek: Form Gönderimlerini İşleme

`netlify/functions/contact.js` adında bir dosya oluşturun ve aşağıdaki içeriğe sahip olsun:

exports.handler = async (event, context) => {
  if (event.httpMethod === 'POST') {
    try {
      const data = JSON.parse(event.body);
      const { name, email, message } = data;

      // TODO: E-postayı göndermek veya verileri depolamak için buraya mantığınızı uygulayın.
      // Bu, SendGrid gibi bir e-posta hizmeti kullanmayı veya
      // verileri bir veritabanında depolamayı içerebilir.

      // Gösteri amaçlı olarak, yalnızca verileri konsola kaydedeceğiz.
      console.log('Ad:', name);
      console.log('E-posta:', email);
      console.log('Mesaj:', message);

      return {
        statusCode: 200,
        body: JSON.stringify({ message: 'Form başarıyla gönderildi!' }),
      };
    } catch (error) {
      console.error('Form gönderimi işlenirken hata:', error);
      return {
        statusCode: 500,
        body: JSON.stringify({ message: 'Form gönderilemedi. Lütfen daha sonra tekrar deneyin.' }),
      };
    }
  } else {
    return {
      statusCode: 405,
      body: JSON.stringify({ message: 'İzin Verilmeyen Yöntem' }),
    };
  }
};

Bu örnekte:

• `event.httpMethod` kullanarak istek yönteminin `POST` olup olmadığını kontrol ediyoruz.
• `JSON.parse(event.body)` kullanarak istek gövdesini ayrıştırıyoruz.
• Verileri ayrıştırılmış gövdeden çıkarıyoruz.
• Özel mantığınız için `// TODO: Buraya mantığınızı uygulayın...` yer tutucu yorumunu ekliyoruz.
• Ayrıştırma veya işleme sırasında olası hataları işlemek için bir `try...catch` bloğu kullanıyoruz.
• `statusCode` ve `body` ile bir yanıt nesnesi döndürüyoruz.

Frontend Sunucusuz Fonksiyonlar için Ortak Kullanım Alanları

Sunucusuz fonksiyonlar, çok çeşitli frontend görevleri için kullanılabilir. İşte bazı yaygın kullanım alanları:

1. Form Gönderimlerini İşleme

Yukarıdaki örneklerde gösterildiği gibi, sunucusuz fonksiyonlar form gönderimlerini işlemek için idealdir. Gönderilen verileri işlemek için e-posta hizmetleri, veritabanları veya diğer API'lerle kolayca entegre olabilirsiniz.

2. Kullanıcıları Kimlik Doğrulama

Sunucusuz fonksiyonlar, Auth0, Firebase Authentication veya Netlify Identity gibi hizmetleri kullanarak kullanıcıların kimliğini doğrulamak için kullanılabilir. Kullanıcı kaydı, oturum açma ve parola sıfırlama işlemlerini gerçekleştirmek için fonksiyonlar oluşturabilirsiniz.

Örnek: Auth0 ile Entegrasyon (Kavramsal)

Kesin uygulama Auth0 SDK'sına bağlı olsa da, genel fikir şudur:

1. Frontend, sunucusuz fonksiyonunuza bir oturum açma isteği gönderir.
2. Sunucusuz fonksiyon, kullanıcının kimlik bilgilerini doğrulamak için Auth0 Yönetim API'sini kullanır.
3. Kimlik bilgileri geçerliyse, sunucusuz fonksiyon bir JWT (JSON Web Token) oluşturur ve frontend'e döndürür.
4. Frontend, JWT'yi depolar ve sonraki istekleri kimlik doğrulamak için kullanır.

3. API'lerden Veri Getirme

Sunucusuz fonksiyonlar, harici API'lerden veri getirmek ve frontend'inize sunmak için kullanılabilir. Bu, API anahtarlarınızı ve diğer hassas bilgilerinizi istemciden gizli tutmanızı sağlar.

Örnek: Herkese Açık Bir API'den Hava Durumu Verilerini Getirme

// Bu örnekte OpenWeatherMap API'si kullanılmaktadır.
const API_KEY = process.env.OPENWEATHERMAP_API_KEY; // API anahtarınızı her zaman ortam değişkenlerinde saklayın!

exports.handler = async (event, context) => {
  const { city } = event.queryStringParameters; // Şehri sorgu dizesinden alın.

  if (!city) {
    return {
      statusCode: 400,
      body: JSON.stringify({ message: 'Lütfen bir şehir belirtin.' }),
    };
  }

  try {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
    const response = await fetch(url);
    const data = await response.json();

    if (!response.ok) {
      throw new Error(`Hava durumu verileri alınamadı: ${response.status} ${response.statusText}`);
    }

    return {
      statusCode: 200,
      body: JSON.stringify(data),
    };
  } catch (error) {
    console.error('Hava durumu verileri alınırken hata:', error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Hava durumu verileri alınamadı.' }),
    };
  }
};

Önemli: API anahtarlarınızı ve diğer hassas bilgilerinizi her zaman doğrudan kodunuzda değil, ortam değişkenlerinde saklayın. Vercel ve Netlify, ortam değişkenlerini ayarlamak için mekanizmalar sağlar.

4. Dinamik Görüntüler Oluşturma

Sunucusuz fonksiyonlar, kullanıcı girdisine veya verilere dayalı olarak dinamik görüntüler oluşturmak için kullanılabilir. Bu, kişiselleştirilmiş banner'lar, sosyal medya önizlemeleri veya diğer dinamik içerikler oluşturmak için kullanışlıdır.

5. Sunucu Tarafı Renderlama (SSR) Uygulama

Next.js ve Nuxt.js gibi çerçeveler yerleşik SSR yetenekleri sunarken, uygulamanızın belirli bölümleri için SSR uygulamak için sunucusuz fonksiyonları da kullanabilirsiniz. Bu, içerik ağırlıklı sayfalar için SEO'yu ve performansı artırabilir.

Sunucusuz Fonksiyonlar Oluşturmak için En İyi Uygulamalar

Sağlam ve ölçeklenebilir sunucusuz fonksiyonlar oluşturmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

• Fonksiyonları Küçük ve Odaklı Tutun: Her fonksiyonun tek, iyi tanımlanmış bir amacı olmalıdır. Bu, onların anlaşılmasını, test edilmesini ve bakımının yapılmasını kolaylaştırır.
• Yapılandırma için Ortam Değişkenlerini Kullanın: API anahtarlarını, veritabanı kimlik bilgilerini ve diğer hassas bilgileri ortam değişkenlerinde saklayın.
• Hataları Zarifçe İşleyin: Herhangi bir istisnayı yakalamak ve istemciye bilgilendirici hata mesajları döndürmek için `try...catch` bloklarını kullanın.
• Fonksiyon Performansını Optimize Edin: Fonksiyonlarınızdaki kod ve bağımlılık miktarını en aza indirin. Olay döngüsünü engellememek için asenkron işlemleri kullanın.
• Günlüğe Kaydetme ve İzleme Uygulayın: Fonksiyonlarınızın performansını izlemek ve herhangi bir sorunu belirlemek için günlüğe kaydetme ve izleme araçlarını kullanın.
• Fonksiyonlarınızı Güvenli Hale Getirin: Fonksiyonlarınızı yetkisiz erişime karşı korumak için uygun güvenlik önlemleri uygulayın. Bu, girdi doğrulama, kimlik doğrulama ve yetkilendirmeyi içerebilir.
• Soğuk Başlangıçları Göz Önünde Bulundurun: Soğuk başlangıçların fonksiyon performansı üzerindeki potansiyel etkisinin farkında olun. Soğuk başlangıçlar, bir fonksiyon ilk kez veya bir süre etkinlikten sonra çağrıldığında meydana gelir. Fonksiyonlarınızı küçük tutarak ve sağlanan eşzamanlılığı kullanarak (varsa) soğuk başlangıçların etkisini azaltabilirsiniz.
• Fonksiyonlarınızı Kapsamlı Bir Şekilde Test Edin: Fonksiyonlarınızın düzgün çalıştığından emin olmak için birim testleri ve entegrasyon testleri yazın.
• Tutarlı Bir Kod Stili Kullanın: Okunabilirliği ve sürdürülebilirliği artırmak için tutarlı bir kod stili izleyin.
• Fonksiyonlarınızı Belgeleyin: Fonksiyonlarınız için net ve özlü belgeler sağlayın.

Güvenlik Hususları

Sunucusuz fonksiyonlar, farkında olmanız gereken yeni güvenlik hususlarını sunar:

• Girdi Doğrulama: Enjeksiyon saldırılarını ve diğer güvenlik açıklarını önlemek için kullanıcı girişini her zaman doğrulayın.
• Kimlik Doğrulama ve Yetkilendirme: Hassas verilere ve işlevlere erişimi kısıtlamak için uygun kimlik doğrulama ve yetkilendirme mekanizmaları uygulayın.
• Bağımlılık Yönetimi: Bilinen güvenlik açıklarını gidermek için bağımlılıklarınızı güncel tutun.
• Gizli Dizi Yönetimi: API anahtarlarını, veritabanı kimlik bilgilerini ve diğer hassas bilgileri korumak için güvenli gizli dizi yönetimi uygulamaları kullanın. Gizli dizileri doğrudan kodunuzda veya yapılandırma dosyalarınızda saklamaktan kaçının.
• Düzenli Güvenlik Denetimleri: Olası güvenlik açıklarını belirlemek ve gidermek için düzenli güvenlik denetimleri yapın.

Küresel Hususlar

Küresel bir kitle için sunucusuz fonksiyonlar geliştirirken, aşağıdakileri göz önünde bulundurun:

• Saat Dilimleri: Tarih ve saatlerle uğraşırken saat dilimi dönüştürmelerini uygun şekilde işleyin. Saat dilimi işlemeyi basitleştirmek için `moment-timezone` veya `date-fns-tz` gibi bir kitaplık kullanın.
• Yerelleştirme: Birden çok dili ve kültürü desteklemek için yerelleştirme uygulayın. Çevirileri yönetmek için `i18next` veya `react-intl` gibi bir kitaplık kullanın.
• Para Birimleri: Finansal işlemlerle uğraşırken para birimi dönüştürmelerini uygun şekilde işleyin. Güncel döviz kurlarını almak için Exchange Rates API veya Open Exchange Rates gibi bir API kullanın.
• Veri Gizliliği: Farklı ülkelerde ve bölgelerdeki veri gizliliği düzenlemelerinin farkında olun. GDPR (Genel Veri Koruma Yönetmeliği) ve CCPA (California Tüketici Gizliliği Yasası) gibi düzenlemelere uyun.
• İçerik Dağıtım Ağı (CDN): İçeriği kullanıcılarınıza daha yakın konumdaki sunuculardan sunmak için bir CDN kullanın. Bu, özellikle coğrafi olarak uzak konumlardaki kullanıcılar için performansı artırabilir ve gecikmeyi azaltabilir. Vercel ve Netlify'ın her ikisi de yerleşik CDN yetenekleri sunar.

Sonuç

Frontend sunucusuz fonksiyonlar, modern web uygulamaları oluşturmak için güçlü ve esnek bir yol sunar. Vercel ve Netlify gibi platformlardan yararlanarak geliştirmeyi basitleştirebilir, operasyonel yükü azaltabilir ve uygulama performansını artırabilirsiniz. Bu kılavuzda özetlenen faydaları, kullanım alanlarını ve en iyi uygulamaları anlayarak, sunucusuz fonksiyonların tüm potansiyelini ortaya çıkarabilir ve kullanıcılarınız için harika web deneyimleri oluşturabilirsiniz.

Sunucusuzun gücünü benimseyin ve frontend geliştirmenizi bir sonraki seviyeye taşıyın!